/**
 * ! Header操作栏
 */
import '../Scss/HeaderOptions.scss'
import { LaptopOutlined, BellOutlined, QuestionCircleOutlined, AlertOutlined, WechatOutlined } from '@ant-design/icons'
import { useEventEmitter, useSessionStorageState } from 'ahooks'
import { message, Tooltip, Badge } from 'antd'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { ModalBox } from '../../../../Modal/ModalBox'
import { ICON } from '../../../../Configure/Icon'

const { hostname } = window.location

export const operatingButtonList = {
    '001': {
        uuid: '001',
        title: '前往大屏',
        content: '后台跳转大屏',
        icon: <LaptopOutlined />,
        isEnabled: false,
        click: ClickEvent => ClickEvent.emit('001'),
    },
    '002': {
        uuid: '002',
        title: '通知信息',
        content: '工作站信息列表 (功能开发中)',
        icon: <BellOutlined />,
        isEnabled: false,
        click: ClickEvent => ClickEvent.emit('002'),
    },
    '003': {
        uuid: '003',
        title: '帮助提示',
        content: '系统帮助信息 (功能开发中)',
        icon: <QuestionCircleOutlined />,
        isEnabled: false,
        click: ClickEvent => ClickEvent.emit('003'),
    },

    '004': {
        uuid: '004',
        title: '审核通知',
        content: '交建投的审核提醒与进入个人审核信息界面',
        icon: <AlertOutlined />,
        isEnabled: false,
        click: ClickEvent => ClickEvent.emit('004'),
    },
    '005': {
        uuid: '005',
        title: '微信绑定',
        content: '绑定微信和解除绑定微信',
        icon: <WechatOutlined style={{ color: '#2bdc70' }} />,
        isEnabled: false,
        click: ClickEvent => ClickEvent.emit('005'),
    },
    '006': {
        uuid: '006',
        title: '微信公众号',
        content: '微信公众号',
        icon: ICON['weixingongzhonghao'],
        isEnabled: false,
        click: ClickEvent => ClickEvent.emit('006'),
    },
}

const HeaderOptions001 = ({ configuration, ClickEvent, list, color, parameter }) => {
    return (
        <div className="HeaderOptions001" style={{ '--color': color }}>
            {list.map(({ uuid, title, icon, click }) => (
                <Badge key={uuid} size="small" count={parameter ? parameter[uuid] : 0}>
                    <Tooltip placement="bottom" title={title} onClick={() => !configuration && click(ClickEvent)}>
                        {icon}
                    </Tooltip>
                </Badge>
            ))}
        </div>
    )
}

const HeaderOptions002 = ({ configuration, ClickEvent, list, color, parameter }) => {
    return (
        <div className="HeaderOptions002" style={{ '--color': color }}>
            {list.map(({ uuid, title, icon, click }) => (
                <Badge key={uuid} size="small" count={parameter ? parameter[uuid] : 0}>
                    <Tooltip placement="bottom" title={title} onClick={() => !configuration && click(ClickEvent)}>
                        {icon}
                    </Tooltip>
                </Badge>
            ))}
        </div>
    )
}

export const HeaderOptionsData = {
    '001': HeaderOptions001,
    '002': HeaderOptions002,
}

export const HeaderOptionList = ({ configuration, data, parameter, SelectMenusEvent }) => {
    const [UserInfo] = useSessionStorageState('UserInfo')
    const Navigate = useNavigate()
    const [messageApi, contextHolder] = message.useMessage()
    const Template = HeaderOptionsData[data.type]
    const [OptionsList, setOptionsList] = useState([])
    const [Color, setColor] = useState('')
    const [OptionsCall, setOptionsCall] = useState()
    useEffect(() => {
        if (data) {
            setColor(data.color)
            setOptionsList(data.list.map(item => operatingButtonList[item]))
        }
    }, [data])
    const ClickEvent = useEventEmitter()
    ClickEvent.useSubscription(val => {
        switch (val) {
            case '001':
                let url = '/Front'
                if (hostname === 'jtgj.ljkjkf.com')
                    url = UserInfo.userOrganizationIdentityLevels.includes('9') ? '/Front' : '/Front/Page/OneOne'
                Navigate(url)
                break
            case '004':
                SelectMenusEvent.emit('98c624c8-13ad-4e73-9c96-6ccfd226c45e')
                break
            case '005':
                setOptionsCall({ type: 'WeChatBindBox', data: { title: '微信绑定', width: 600 } })
                break
            case '006':
                setOptionsCall({ type: 'WeChatOfficialModel', data: { title: '微信公众号', width: 600 } })
                break
            default:
                messageApi.info('功能研发中...')
                break
        }
    })

    return (
        <>
            {contextHolder}
            <Template
                configuration={configuration}
                ClickEvent={ClickEvent}
                list={OptionsList}
                color={Color}
                parameter={parameter}
            />
            <ModalBox OptionsCall={OptionsCall} />
        </>
    )
}
